<template>
    <div class="banr d-flex align-center justify-space-between" :class="{phone: layout.isMobile}">
        <div class="banr-l">
            <div class="tip1">
                {{ $t("message.Baner_.a") }}
            </div>
            <div class="tip2 mb-4">
                {{ $t("message.Baner_.b") }}
            </div>
            <!-- <div class="tip3">
                {{ $t("message.Baner_.c") }}
            </div> -->
            <v-btn class="tip4" :disabled="!user.isLogin" :class="[!user.isLogin ? 'gred' : '']" color="primary"
                @click="showShare">
                {{ $t("message.Baner_.d") }}
            </v-btn>
        </div>
        <div class="banr-r d-flex">
            <Barr></Barr>
            <Active v-if="!layout.isMobile"></Active>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Barr from "./components/Barr.vue";
import { useAccount } from "@/stores/account";
import i18n from "@/locals";
import { useUser } from "@/stores/user";
import Active from "@/views/reward/energy_checkIn/activity.vue";
import { useLayout } from "@/stores/layout";

const user = useUser();

const account = useAccount();
const layout = useLayout()

const showShare = () => {
    console.log(user.isLogin);

    if (user.isLogin) {
        // user.getUserInfo()
        account.changePopShare(true);
    }

};

const items = ref([
    {
        // title: "主頁",
        title: i18n.global.t("message.Global.Home"),
        disabled: false,
        href: "/"
    },
    {
        // title: "獎勵中心",
        title: i18n.global.t("message.Global.child.g"),
        disabled: true,
        href: ""
    }
]);
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
